<template>
	<view class="module flex_ZC">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>
		<view class="information_txt flex_Z">
			<text class="f48 c3 fw5" v-if="bankInfo.payment_type==2">对公账户信息</text>
			<text class="f48 c3 fw5" v-if="bankInfo.payment_type==1">对私法人账户信息</text>
		</view>
		<view class="content padb30 flex_Z">
			<view class="flex_dq">
				<text class="f28 c3 fw5">选择银行账户类型</text>
				<text class="tishi"> *</text>
			</view>
			<view class="describe">
				<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
				<text class="">请仔细核验账户信息，以免影响正常结算业务</text>
			</view>
			<view class="term_box">
				<text class='category_box flex_c' :class="bankInfo.payment_type==2?'active_box':''"
					@click="setPayType('2')">对公</text>
				<text class='category_box flex_c' :class="bankInfo.payment_type==1?'active_box':''"
					@click="setPayType('1')">对私法人</text>
				<!-- <text class='category_box flex_c' :class="accountType==2?'active_box':''">对私非法人</text> -->
			</view>
		</view>

		<view class="content flex_Z">
			<view class="flex_dq">
				<text class="f28 c3 fw5">上传证明材料</text>
				<text class="tishi"> *</text>
			</view>

			<view class="flex_Z">
				<view class="describe">
					<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
					<text class="" v-if="bankInfo.payment_type==2">可上传开户许可证/基本存款账户信息/电子回单/印鉴卡等</text>
					<text class="" v-if="bankInfo.payment_type==1">请上传银行卡卡号面</text>
				</view>
				<view class="">
					<u-upload :fileList="fileList1" @afterRead="afterRead($event,'yhkh')" @delete="deletePic" name="1"
						:maxCount="bankInfo.payment_type==2?2:1" multiple :maxSize="6 *1024 *1024" @oversize="overSize">
						<view class="content_r  flex_c">
							<image :src="baseUrl +'/static/ymimage/sbzc.png'" mode="aspectFit"></image>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="content padb30 flex_Z" v-if="false">
			<view class="flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">上传身份证</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">上传营业执照上经营者/法定代表人身份证</text>
			</view>
			<u-upload :fileList="fileList2" @afterRead="afterRead($event,'face')" @delete="deletePic($event,'face',)"
				name="2" :maxCount="1" :maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
				<view class="content_sfz flex_c">
					<image :src="baseUrl +'/static/image/sfzzm.png'" mode="aspectFit"></image>
				</view>
			</u-upload>

			<u-upload :fileList="fileList3" @afterRead="afterRead($event,'back')" @delete="deletePic($event,'back',)"
				name="3" :maxCount="1" :maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
				<view class="content_sfz flex_c">
					<image :src="baseUrl +'/static/image/sfzfm.png'" mode="aspectFit"></image>
				</view>
			</u-upload>
		</view>

		<view class="supplement">
			<view class="flex_Z lineb">
				<view class=" flex_dq">
					<text class="mt5 f28 c3">银行卡账户名称</text>
					<text class="c32 c1 ml8 mr10"> *</text>
				</view>
				<u--input placeholder="请输入银行卡账户名称" fontSize="14" color="#666666" border="none "
					v-model.trim="bankInfo.name" clearable></u--input>
			</view>
			<view class="flex_Z lineb">
				<view class=" flex_dq">
					<text class="mt5 f28 c3">银行卡号</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<u--input placeholder="请输入银行卡户号" fontSize="14" color="#666666" border="none "
					v-model.trim="bankInfo.account" clearable></u--input>
			</view>

			<view class=" flex_Z lineb">
				<view class=" flex_dq">
					<text class="mt5 f28 c3">银行开户地区</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<view class=" flex_ld" @click="openAddress">
					<u--input placeholder="请选择银行开户地区" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.full_address" clearable></u--input>
					<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon>
				</view>

			</view>
			<view class=" flex_Z lineb">
				<view class=" flex_dq">
					<text class="mt5 f28 c3">银行名称</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<!-- @click="openBank(1)" -->
				<view class=" flex_ld">
					<bankChange :bankCode='bankInfo.bank_code' :bankNames='bankInfo.bank_name' placeholder='银行名称'
						bankName='银行列表' @closeBank='closeBank' @changeBank='changeBank'></bankChange>
					<!-- <u--input placeholder="请选择银行名称" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.bank_name" readonly clearable></u--input>
					<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon> -->
				</view>
			</view>
			<view class=" flex_Z lineb" v-if="bankInfo.payment_type==2">
				<view class=" flex_dq">
					<text class="mt5 f28 c3">支行名称</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<view class=" flex_ld">
					<bankChange ref="zhihang" :bankCode='bankInfo.branch_code' :bankNames='bankInfo.branch_name'
						:bankPcode='bankInfo.bank_code' placeholder='支行名称' bankName='支行列表' @closeBank='closeBank'
						@changeBank='changeBank'></bankChange>
					<!-- <u--input placeholder="请选择支行名称" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.branch_name" readonly clearable></u--input>
					<u-icon name="arrow-right" color="#579BFF" size="12"></u-icon> -->
				</view>
			</view>
			<view class=" flex_Z lineb" v-if="false">
				<view class=" flex_dq">
					<text class="f28 c3">持卡人身份证号码</text>
					<text class="c32 c1 ml8 mr10"> *</text>
				</view>
				<u--input placeholder="持卡人身份证有效期" fontSize="14" color="#666666" border="none "
					v-model.trim="bankInfo.name" clearable></u--input>
			</view>
			<view class=" flex_Z lineb" v-if="false">
				<view class=" flex_dq">
					<text class="f28 c3">持卡人身份证有效期</text>
					<text class="c32 c1 ml8"> *</text>
				</view>
				<u--input placeholder="请输入银行卡户号" fontSize="14" color="#666666" border="none "
					v-model.trim="bankInfo.account" clearable></u--input>
			</view>

			<view class="">
				<view class="mt48">
					<text class=" f48 c3 fw5">管理员信息</text>
				</view>

				<view class="mt40 flex_Z lineb" v-if="false">
					<view class=" flex_dq">
						<text class="f28 c3">管理员账号</text>
						<text class="c32 c1 ml8 mr10"> *</text>
					</view>
					<view class="describe">
						<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
						<text class="">该账号可登录商户控台，以及显示在机打小票操作员一栏，请慎重定义</text>
					</view>
					<u--input placeholder="请输入管理员账号" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.name" clearable></u--input>
				</view>
				<view class="mt40 flex_Z lineb" v-if="false">
					<view class=" flex_dq">
						<text class="f28 c3">管理员手机号</text>
						<text class="c32 c1 ml8 mr10"> *</text>
					</view>
					<u--input placeholder="请输入管理员手机号" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.name" clearable></u--input>
				</view>
				<view class="mt40 flex_Z lineb">
					<view class=" flex_dq">
						<text class="f28 c3">管理员邮箱</text>
						<text class="c32 c1 ml8 mr10"> *</text>
					</view>
					<u--input placeholder="请输入管理员邮箱" fontSize="14" color="#666666" border="none "
						v-model.trim="bankInfo.email" clearable></u--input>
				</view>
			</view>
			<view class="supplement mt24">
				<view class=" flex_ld">
					<text class="f28 c3 fw7">是否需要经办人代替法人在线签约</text>
					<u-switch v-model="contactsShow" size="20" @change="changeJbr"></u-switch>
				</view>
				<view v-if="contactsShow">
					<view class="mt24 flex_Z lineb">
						<view class=" flex_dq">
							<text class="f28 c3">经办人姓名</text>
							<text class="c32 c1 ml8"> *</text>
						</view>
						<u--input placeholder="请输入经办人姓名" fontSize="14" color="#666666" border="none "
							v-model.trim="contacts_name" clearable></u--input>
					</view>
					<view class="mt24 flex_Z lineb">
						<view class=" flex_dq">
							<text class="f28 c3">经办人手机号</text>
							<text class="c32 c1 ml8"> *</text>
						</view>
						<u--input placeholder="请输入经办人手机号" fontSize="14" color="#666666" border="none "
							v-model.trim="contacts_mobile" clearable></u--input>
					</view>
					<view class="mt24 flex_Z lineb">
						<view class=" flex_dq">
							<text class="f28 c3">经办人身份证号</text>
							<text class="c32 c1 ml8"> *</text>
						</view>
						<u--input placeholder="请输入经办人身份证号" fontSize="14" color="#666666" border="none "
							v-model.trim="contacts_id_number" clearable></u--input>
					</view>
				</view>
			</view>
		</view>


		<view class="btns flex_ld">
			<text class="sign_out" @click="leftClick">上一步</text>
			<view class="service flex_c">
				<text class="" @click="$u.debounce(nextStep1, 300)">提交审核</text>
			</view>
		</view>


		<view class="empty3"></view>
		<atAddress ref="scroll" :level="2" @change='chooseSuccess'></atAddress>
		<!-- <u-popup :show="levelOneShow" mode="bottom" @close="levelOneShow = false" :safeAreaInsetBottom="false" closeable
			bgColor="transparent">
			<view class="area_popup flex_ZC">
				<view class="titles flex_ZC">
					<text>银行列表</text>
					<view class="titles_input">
						<u-search bgColor="#f7f7f7" searchIconSize="28" v-model.trim="names" :actionStyle="actionStyle"
							margin="0 16px 0 0" @clear="clearOne" @search="isSearch111" animation
							@custom="isSearch111"></u-search>
					</view>
				</view>
				<view class="masks"></view>
				<view class="popup_list mt24 flex_Z">
					<view class="area_box" :class="item.id == bankOneId?'active2':''" v-for="(item,index) in kaihuList"
						:key="index" @click="changeAreaOne(item)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-popup> -->

		<!-- <u-popup :show="levelTwoShow" mode="bottom" @close="levelTwoShow = false" :safeAreaInsetBottom="false" closeable
			bgColor="transparent">
			<view class="area_popup flex_ZC">
				<view class="titles flex_ZC">
					<text>支行列表</text>
					<view class="titles_input">
						<u-search bgColor="#f7f7f7" searchIconSize="28" v-model.trim="names" :actionStyle="actionStyle"
							margin="0 16px 0 0" @clear="clearTwo" @search="isSearch222" animation
							@custom="isSearch222"></u-search>
					</view>
				</view>
				<view class="masks"></view>
				<view class="popup_list mt24 flex_Z" v-if="zhihangList.length>0">
					<view class="area_box" :class="item.id == bankTwoId?'active2':''"
						v-for="(item,index) in zhihangList" :key="index" @click="changeAreaTwo(item)">
						<text>{{item.branch_name}}</text>
					</view>
				</view>
				<view class="mt40 flex_ZC" v-else>
					<image class="noImg" :src="baseUrl + '/static/image/noData1.png'" mode="aspectFill"></image>
					<text class="no_tit">请输入支行名称查找</text>
				</view>
			</view>
		</u-popup> -->

	</view>
</template>

<script>
	import UploadFile from '../../common/upload'
	import {
		baseURL
	} from "../../utils/request.js"
	import {
		bankList,
	} from "../../api/join.js"
	import {
		settledSevenSave,
		settledDetails
	} from '@/api/settled.js'
	import bankChange from '@/components/bankList.vue'
	export default {
		data() {
			return {
				title: "开通账款服务",
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				sideDetail: "",
				levelOneShow: false, //拉起银行
				levelOneShow1: false, //拉起银行
				levelTwoShow: false, //拉起支行
				actionStyle: {
					fontSize: '28rpx',
					color: '#FFC300'
				},
				modifyState: false,
				names: '',
				fileList1: [],
				fileList2: [],
				fileList3: [],
				kaihuList: [], //银行列表
				zhihangList: [], //支行列表
				bankOneId: '',
				bankName: "",
				bankInfo: {
					name: '',
					bank_name: '',
					branch_name: '',
					full_address: '',
					account: '',
					city_id: '',
					seller_id: '',
					bank_code: '',
					branch_code: '',
					province_id: '',
					payment_type: '2', //1=个人结算,2=对公结算  
					email: '',
					card_front_pic: ""
				},
				seller_id: "",
				outList: [],
				outBank: {},
				details: {},
				contactsShow: false,
				contacts_name: '',
				contacts_id_number: '',
				contacts_mobile: '',
			}
		},

		onLoad(options) {
			// this.seller_id = 5
			if (options.id) {
				this.seller_id = options.id
			}
			if (options.data) {
				let data = JSON.parse(options.data)
				if (data.modifyState) {
					this.modifyState = data.modifyState
					let ymDetails = JSON.parse(uni.getStorageSync('ymShopDetails')) || {}
					console.log();
					let ymData = ymDetails.bank_card
					this.bankInfo.name = ymData.name
					this.bankInfo.bank_name = ymData.bank_name
					this.bankInfo.branch_name = ymData.branch_name
					this.bankInfo.account = ymData.account
					this.bankInfo.city_id = ymData.city_id
					this.bankInfo.bank_code = ymData.bank_code
					this.bankInfo.branch_code = ymData.branch_code
					this.bankInfo.province_id = ymData.province_id
					this.bankInfo.payment_type = ymData.payment_type
					this.bankInfo.full_address = ymData.full_address
					this.bankInfo.card_front_pic = this.getPathAfterCom(ymData.card_front_pic)
					this.bankInfo.email = ymDetails.email
					this.contacts_name = ymDetails.seller_auth.contacts_name
					this.contacts_id_number = ymDetails.seller_auth.contacts_id_number
					this.contacts_mobile = ymDetails.seller_auth.contacts_mobile
					this.contactsShow = ymDetails.seller_auth.contacts_legal?true:false
					this.fileList1.push({
						'thumb': ymData.card_front_pic,
						'status': 'success'
					})
				}
				this.seller_id = data.id

			}
			// this.bankOneList()
			this.gettledDetail()
		},
		onShow() {
			// if (uni.getStorageSync('ocrIdentityInfo')) {
			// 	this.ocrIdentityInfo = uni.getStorageSync('ocrIdentityInfo')
			// }
		},
		components: {
			bankChange
		},
		methods: {
			changeJbr(e) {
				this.contactsShow = e
			},
			gettledDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				settledDetails().then(res => {
					console.log(res);
					uni.hideLoading()
					this.details = res.data.seller_auth
					if(this.bankInfo.payment_type == 2){
						this.bankInfo.name = res.data.seller_auth.license_name
					} else {
						this.bankInfo.name = res.data.seller_auth.legal_person_name
					}
					uni.hideLoading()
				})
			},
			setPayType(num) {
				console.log(num);
				if (num != this.bankInfo.payment_type) {
					// 此时是第一次切换
					if (this.outList.length == 0) {
						// 将当前填写的内容添加到fillout中
						this.outBank = JSON.parse(JSON.stringify(this.bankInfo))
						this.outList = JSON.parse(JSON.stringify(this.fileList1))
						this.bankInfo = {
							name: num == 1 ? this.details.legal_person_name : this.details.license_name,
							bank_name: '',
							branch_name: '',
							full_address: '',
							account: '',
							city_id: '',
							seller_id: '',
							bank_code: '',
							branch_code: '',
							province_id: '',
							payment_type: num, //1=个人结算,2=对公结算  
							email: '',
							card_front_pic: ""
						}
						this.fileList1 = []
					} else {
						let outList = this.outList
						let outBank = this.outBank
						this.outBank = JSON.parse(JSON.stringify(this.bankInfo))
						this.outList = JSON.parse(JSON.stringify(this.fileList1))
						this.bankInfo = outBank
						this.fileList1 = outList

					}
					this.bankInfo.payment_type = num
				}
			},
			//打开地址选择器
			openAddress() {
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				this.bankInfo.full_address = ''
				let value = e.value;
				this.bankInfo.province_id = e.value[0].id
				this.bankInfo.city_id = e.value[1].id
				this.bankInfo.full_address = value.map(item => item.name).join(' ')
			},
			// 点击搜索按钮触发
			// cilckCustom() {
			// 	console.log('点击搜索按钮触发');
			// 	this.kaihuList = []
			// 	this.bankOneList()
			// },
			// isSearch111() {
			// 	console.log(1111, this.names);
			// 	this.kaihuList = []
			// 	this.bankOneList()
			// },
			// isSearch222() {
			// 	console.log(2222, this.names);
			// 	if (this.names != '') {
			// 		this.zhihangList = []
			// 		this.bankTwoList()
			// 	}
			// },
			// 点击搜索按钮触发
			// cilckCustomTwo() {
			// 	console.log('点击搜索按钮触发');
			// 	this.kaihuList = []
			// 	this.bankOneList()
			// },
			// 一级银行列表
			// bankOneList() {
			// 	let data = {
			// 		code: '',
			// 		name: this.names,
			// 		province_id: this.bankInfo.province_id,
			// 		city_id: this.bankInfo.city_id,
			// 	};
			// 	bankList(data).then(res => {
			// 		console.log(res);
			// 		if (res.code == 1) {
			// 			this.kaihuList = res.data
			// 		}
			// 	})
			// },

			// // 二级银行列表
			// bankTwoList() {
			// 	let data = {
			// 		code: this.bankInfo.bank_code,
			// 		name: this.names,
			// 		province_id: this.bankInfo.province_id,
			// 		city_id: this.bankInfo.city_id,
			// 	};
			// 	bankList(data).then(res => {
			// 		console.log(res);
			// 		if (res.code == 1) {
			// 			this.zhihangList = res.data
			// 		}
			// 	})
			// },
			openBank(num) {
				// if(num == 1){
				// 	this.bankName ='银行列表'
				// }else{
				// 	this.bankName ='支行列表'
				// }
				this.levelOneShow1 = true
			},
			closeBank() {
				this.levelOneShow1 = false
			},
			changeBank(item) {
				console.log(item);
				if (item.type == 1) {
					this.bankInfo.bank_code = item.code
					this.bankInfo.bank_name = item.name
					this.bankInfo.branch_name = ''
					this.bankInfo.branch_code = ''
					this.$refs.zhihang.branch_name = ''
				} else {
					this.bankInfo.branch_code = item.branch_code
					this.bankInfo.branch_name = item.branch_name
				}

				this.levelOneShow1 = false



			},
			// // 选取一级银行
			// changeAreaOne(item) {
			// 	console.log(item);
			// 	this.bankOneId = item.id
			// 	this.bankInfo.bank_code = item.code
			// 	this.bankInfo.bank_name = item.name
			// 	this.levelOneShow = false

			// 	this.bankTwoId = ''
			// 	this.bankInfo.branch_name = ''
			// 	this.bankInfo.branch_code = ''
			// 	this.zhihangList = []
			// },
			// // 选取二级银行
			// changeAreaTwo(item) {
			// 	this.bankTwoId = item.id
			// 	this.bankInfo.branch_code = item.branch_code
			// 	this.bankInfo.branch_name = item.branch_name
			// 	this.levelTwoShow = false
			// },

			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},

			// 截取半路经
			getPathAfterCom(url) {
				const parts = url.split('.com');
				return parts.length > 1 ? parts[1] : '';
			},

			// 超出提示
			overSize(event) {
				// console.log(event);
				uni.$u.toast('图片过大,请重新上传!')
			},
			// 删除图片
			deletePic(event, side) {
				console.log(event, side);
				this[`fileList${event.name}`].splice(event.index, 1);
				if (side == 'face') {
					this.halfSfzzm = ''
				} else {
					this.halfSfzfm = ''
				}
			},
			// 新增图片
			async afterRead(event, side) {

				uni.showLoading({
					title: '加载中',
					mask: true
				});
				let ocrType = side == 'back' ? 'face' : side
				let octBoolen = this.bankInfo.payment_type == 2 ? false : true
				const upload = new UploadFile(ocrType, octBoolen)
				await upload.afterRead(event).then(res => {
					this[`fileList${event.name}`] = this[`fileList${event.name}`].concat(res.filelist)
					// this[`fileList${event.name}`] = res.filelist
					if (side == 'yhkh') {
						this.bankInfo.card_front_pic = res.halfRoadRoute[0]
						this.bankInfo.account = res.ocrData.card_no

					}
					uni.hideLoading();
				})
			},
			// 规则校验
			ruleValidation() {
				if (this.fileList1.length <= 0) {
					uni.$u.toast('请上传银行卡卡号面');
					return false;
				}
				if (uni.$u.test.isEmpty(this.bankInfo.name)) {
					uni.$u.toast('请输入银行卡账号名称');
					return false;
				}
				if (uni.$u.test.isEmpty(this.bankInfo.full_address)) {
					uni.$u.toast('请输入所在地址');
					return false;
				}
				if (uni.$u.test.isEmpty(this.bankInfo.bank_name)) {
					uni.$u.toast('请选择银行名称');
					return false;
				}
				if (this.bankInfo.payment_type == 2) {
					if (uni.$u.test.isEmpty(this.bankInfo.branch_name)) {
						uni.$u.toast('请选择支行');
						return false;
					}
				}
				if (this.contactsShow) {
					if (uni.$u.test.isEmpty(this.contacts_name)) {
						uni.$u.toast('请输入经办人姓名');
						return;
					}
					if (!uni.$u.test.mobile(this.contacts_mobile)) {
						uni.$u.toast('请输入经办人手机号');
						return;
					}
					if (!uni.$u.test.idCard(this.contacts_id_number)) {
						uni.$u.toast('请输入经办人身份证号');
						return;
					}
				}
				if (uni.$u.test.isEmpty(this.bankInfo.email)) {
					uni.$u.toast('请输入管理员邮箱');
					return false;
				}
				return true;
			},
			async nextStep1() {
				if (this.ruleValidation()) {
					uni.showLoading({
						title: '',
						mask: true
					});
					const data = {
						...this.bankInfo,
						seller_id: this.seller_id,
						mask: 1,
						contacts_legal:this.contactsShow?1:0,
						contacts_name: this.contacts_name,
						contacts_mobile: this.contacts_mobile,
						contacts_id_number: this.contacts_id_number
					}
					const saveResult = await this.settledSevenSave(data)
					if (saveResult.code == 1) {
						const detailsResult = await this.gettledDetails()
						if (detailsResult.code == 1) {
							uni.$u.toast('提交成功，请等待管理员审核');
							uni.setStorageSync('ymShopDetails', JSON.stringify(detailsResult.data));
							setTimeout(() => {
								uni.redirectTo({
									url: "/pageYm/ymJoin/ymJoinzl"
								})
							}, 1000)
						}
					}
					uni.hideLoading();
				}
			},
			settledSevenSave(data) {
				return new Promise((resolve, reject) => {
					settledSevenSave(data).then(res => {
						if (res.code == 1) {
							resolve(res)
						}
					})
				})
			},
			gettledDetails() {
				return new Promise((resolve, reject) => {
					settledDetails().then(res => {
						if (res.code == 1) {
							resolve(res)
						}
					})
				})
			},
			// 下一步
			nextStep() {

				if (this.ruleValidation()) {
					uni.showLoading({
						title: '',
						mask: true
					});
					const data = {
						...this.bankInfo,
						seller_id: this.seller_id
					}
					settledSevenSave(data).then(res => {
						console.log(res)
						if (res.code == 1) {
							uni.$u.toast('提交成功，请等待管理员审核');
							uni.switchTab({
								url: '/pages/index/mine',
								success() {
									uni.hideLoading()
								}
							})
						}
					})
				}
			},
			// 确认修改
			confirmModify() {
				if (this.ruleValidation()) {
					this.$set(this.ocrIdentityInfo, "id_card_front", this.halfSfzzm);
					this.$set(this.ocrIdentityInfo, "id_card_back", this.halfSfzfm);
					console.log(this.ocrIdentityInfo);
					uni.setStorageSync('ocrIdentityInfo', this.ocrIdentityInfo)
					uni.setStorageSync('sfzShow', true)
					uni.navigateBack({
						delta: 1
					})
				}
			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
		padding: 0 32rpx;
	}

	.describe {
		background: rgba(250, 110, 1, 0.1);
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #FA6E01;
		margin: 16rpx 0;
		padding: 8rpx 16rpx;
		display: flex;
		align-items: center;
	}

	.remind {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
	}

	.information_txt {
		width: 686rpx;
		padding: 10rpx 0;
	}

	.content {
		width: 686rpx;
		/* box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05); */
		/* margin: 16rpx 0; */
	}

	.tishi {
		font-size: 28rpx;
		color: #FA6E01;
		margin-left: 6rpx;
	}

	.content_r {
		width: 160rpx;
		height: 160rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		text-align: start;
		margin: 14rpx 0 32rpx;
	}

	.content_sfz {
		width: 690rpx;
		height: 390rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin: 10rpx auto;
	}

	.content_r>image {
		width: 160rpx;
		height: 160rpx;
	}

	.content_sfz>image {
		width: 588rpx;
		height: 360rpx;
	}

	.content_tip {
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0 20rpx;
	}

	.term_box {
		width: 686rpx;
		margin: 16rpx 0 48rpx;
		display: flex;
	}

	.term_box text {
		margin-right: 40rpx;
	}

	.change_state {
		font-size: 28rpx;
		color: #c0c4cc;
	}

	.xuanze {
		width: 12rpx;
		height: 24rpx;
	}

	.supplement {
		width: 686rpx;
		/* padding: 24rpx 32rpx; */
	}

	.category_box {
		width: 208rpx;
		height: 76rpx;
		border-radius: 12rpx;
		border: 2rpx solid #FFC300;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFC300;
	}

	.active_box {
		background: #FFCC28;
		color: #333333;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
		z-index: 2;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.supplement_item {
		/* height: 152rpx; */
	}

	.lineb {
		border-bottom: 1rpx solid rgba(100, 100, 100, 0.1);
		margin: 10rpx 0;
	}

	.mt24 {
		margin-top: 24rpx;
	}

	.area_popup {
		width: 750rpx;
		height: 1200rpx;
		position: relative;
		background: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		margin: 0 auto;
	}

	.titles {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 750rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #cccccc;
	}

	.titles>text {
		margin-top: 20rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 700;
	}

	.titles_input {
		width: 650rpx;
		/* background: #eeeeee; */
		margin: 20rpx auto;
		padding: 14rpx 0;
	}

	.titles_input>input {
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #333333;
	}

	.service>text {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.masks {
		width: 750rpx;
		height: 220rpx;
		/* background: pink; */
	}

	.popup_list {
		width: 750rpx;
		height: 1200rpx;
		overflow: auto;
		/* padding: 0 30rpx; */
	}

	.area_box {
		width: 100%;
		padding: 14rpx 0;
		font-size: 30rpx;
		color: #333333;
		border-bottom: 1rpx solid rgba(200, 200, 200, 0.1);
		padding-left: 20rpx;
		padding: 20rpx 30rpx;
	}

	.active2 {
		color: #ffffff !important;
		background: #579BFF !important;
	}

	.mt48 {
		margin: 52rpx 0 16rpx;
	}

	/deep/.u-input {
		padding: 0 18rpx 12rpx !important;
	}

	/deep/.u-input__content {
		margin-left: -20rpx;
	}
	/* #ifdef MP-ALIPAY */
	/deep/.u-input__content__field-wrapper__field{
		background: transparent!important;
	}
	/* #endif */
</style>